<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>安全设置</title>
		<link rel="stylesheet" type="text/css" href="__STATIC__/css/tpshop.css" />
		<link rel="stylesheet" type="text/css" href="__STATIC__/css/myaccount.css" />
		<script src="__STATIC__/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <link rel="shortcut icon" type="image/x-icon" href="{$tpshop_config.shop_info_store_ico|default='/public/static/images/logo/storeico_default.png'}" media="screen"/>
	</head>
	<body class="bg-f5">
		<include file="user/header"/>
		<div class="home-index-middle">
			<div class="w1224">
				<div class="g-crumbs">
			       	<a href="{:U('User/index')}">我的商城</a>
			       	<i class="litt-xyb"></i>
			       	<span>安全设置</span>
			    </div>
			    <div class="home-main">
					<include file="user/menu"/>
			    	<div class="ri-menu fr">
			    		<div class="menumain">
			    			<div class="goodpiece">
								<!--<h1>安全设置</h1>-->
								<h1>修改密码</h1>
								<a href=""><span class="co_blue">帮助</span></a>
							</div>
				    		<div class="accouun"></div>
				    		<div class="personerinfro verifyi-next">
				    			<form action="" method="post" id="pwdform">
                                    <if condition="!empty($user[password])">
                                        <ul class="name_jz">
                                            <li class="infor_wi_le"><a href="javascript:void(0);">当前密码：</a></li>
                                            <li class="teaeu">
                                                <a href="javascript:void(0);">
                                                    <input type="password" name="old_password" value="" hidden>
                                                    <input class="name_zjxs" type="password" name="old_password" id="old_password" value="" >
                                                </a>
                                            </li>
                                        </ul>
                                    </if>
				    				<ul class="name_jz">
										<li class="infor_wi_le"><a href="javascript:void(0);">新登录密码：</a></li>
										<li class="teaeu">
											<a href="javascript:void(0);">
												<input class="name_zjxs" type="password" name="new_password" id="new_password" value="" placeholder="6-16位字母、数字或符号组合"  onkeyup="securityLevel(this.value)">
												<i class="teaeu_i"></i>
											</a>
											<a class="safebil" href="javascript:void(0);">
												<span>安全程度：</span>
												<span class="lowzg red">低</span>
												<span class="lowzg ">中</span>
												<span class="lowzg ">高</span>
											</a>
										</li>
									</ul>
									<ul class="name_jz">
										<li class="infor_wi_le"><a href="javascript:void(0);">确认新密码：</a></li>
										<li class="teaeu">
											<a href="javascript:void(0);">
												<input class="name_zjxs" type="password" name="confirm_password" id="confirm_password" value=""placeholder="6-16位字母、数字或符号组合">
												<i class="teaeu_i"></i>
											</a>
										</li>
									</ul>
									<ul class="hobby_jz">
										<li class="infor_wi_le"></li>
										<div class="save_s">
											<input type="hidden" name="step" value="3">
											<input class="save" type="button" onclick="checkSubmit()" value="保存">
										</div>
									</ul>
				    			</form>
				    		</div>
			    		</div>
			    	</div>
			    </div>
			</div>
		</div>
		<!--footer-s-->
        <div class="footer p">
            <include file="public/footer" />
        </div>
		<!--footer-e-->
	</body>
<script type="text/javascript">
    /**
     * 密码提示标识
     */
    $(document).on('keyup','#confirm_password',function(){
        var new_password = $('#new_password').val();
        var confirm_password = $('#confirm_password').val();
        if(confirm_password == new_password){
            $('.teaeu_i').addClass('qrzf');
        }else{
            $('.teaeu_i').removeClass('qrzf');
        }
    })
    //显示密码安全等级
    function securityLevel(sValue) {
        var modes = 0;
        //正则表达式验证符合要求的
        if (sValue.length < 6 ) return modes;
        if (/\d/.test(sValue)) modes++; //数字
        if (/[a-z]/.test(sValue)) modes++; //小写
        if (/[A-Z]/.test(sValue)) modes++; //大写
        if (/\W/.test(sValue)) modes++; //特殊字符
        $('.lowzg').eq(modes-1).addClass('red').siblings('.lowzg').removeClass('red');
    };

	function checkSubmit(){
		var new_password = $('#new_password').val();
		var confirm_password = $('#confirm_password').val();
		if(new_password == ''){
			layer.alert('新登录密码不能为空', {icon: 2});
			return false;
		}
		if(new_password.length<6 || new_password.length>18){
			layer.alert('密码长度不符合规范', {icon: 2});
			return false;
		}
		if(new_password != confirm_password){
			layer.alert('两次密码不一致', {icon: 2});
			return false;
		}
		$('#pwdform').submit();
	}
	</script>
</html>